<template>
    <div class="bg-white shadow-lg rounded-lg p-6">
        <div class="flex flex-row-reverse w-full gap-2 items-center mb-4">
            <n-select
                v-model:value="value"
                size="small"
                :options="options"
                class="w-2/5"
                placeholder="请选择周次"
            />
            <svg
                xmlns="http://www.w3.org/2000/svg"
                class="h-6 w-6 text-green-600"
                fill="none"
                viewBox="0 0 24 24"
                stroke="currentColor"
                stroke-width="2"
            >
                <path
                    stroke-linecap="round"
                    stroke-linejoin="round"
                    d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"
                />
            </svg>
        </div>
        <div class="grid grid-rows-my-schedule gap-2 grid-cols-8">
            <div class="text-center font-bold">周 / 节次</div>
            <div class="text-center font-bold">周一</div>
            <div class="text-center font-bold">周二</div>
            <div class="text-center font-bold">周三</div>
            <div class="text-center font-bold">周四</div>
            <div class="text-center font-bold">周五</div>
            <div class="text-center font-bold">周六</div>
            <div class="text-center font-bold">周日</div>
            <div
                v-for="(course, i) in courses"
                class="overflow-clip h-24 hover:scale-110 transition-all duration-200 select-none"
            >
                <div
                    v-if="course.time"
                    class="rounded-md h-full w-full transition-all duration-300 p-2 border-t-2 flex flex-col justify-center items-center"
                >
                    <div class="font-bold text-lg">{{ course.time }}</div>
                    <div>{{ course.range }}</div>
                </div>
                <div
                    v-else-if="course.teacher"
                    :class="(Math.floor(i / 8) + i) % 2 ? 'text-green-700 bg-green-100' : 'text-yellow-700 bg-yellow-100'"
                    class="rounded-md h-full w-full transition-all duration-300 p-2"
                >
                    <div class="font-bold">{{ course.name }}</div>
                    <div class="text-xs">@{{ course.address }}</div>
                    <div class="text-xs">{{ course.teacher }}</div>
                </div>
                <div
                    v-else
                    class="rounded-md h-full w-full transition-all duration-300 p-2 bg-gray-100"
                ></div>
            </div>
        </div>
    </div>
</template>

<script setup>
import { ref } from 'vue';
import { NSelect } from 'naive-ui';

const options = ref([])
for (let i = 0; i < 18; i++) {
    options.value.push({ label: `第${i + 1}周`, value: `第${i + 1}周` })
}

const courses = ref([])
for (let i = 0; i < 48; i++) {
    if (i % 8 === 0) courses.value.push({ time: Math.floor(i / 8 + 1), range: '8:00-9:50' })
    else {
        if (i % 8 === 6 || i % 8 === 7) {
            courses.value.push({})
        }
        else if (Math.random() <= 0.5) {
            courses.value.push({
                name: '课程',
                teacher: '老师',
                address: '地点'
            })
        } else {
            courses.value.push({})
        }
    }
}
</script>